.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

body {
    background: #f0f0f0;
}

//头部
.header {
    z-index: 99;
    width: 100%;
    .px2rem(height, 100);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    .px2rem(font-size, 46);
    span:nth-child(1) {
        width: 12%;
        text-align: center;
        .px2rem(font-size, 80);
        position: relative;
        .ul1 {
            position: absolute;
            .px2rem(left, 10);
            .px2rem(top, 100);
            display: none;
            li {
                .px2rem(width, 80);
                .px2rem(height, 80);
                background: #333333;
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            li:nth-child(1) {
                img {
                    .px2rem(width, 40);
                    .px2rem(height, 40);
                }
            }
            li:nth-child(2) {
                .px2rem(margin-top, 30);
                img {
                    .px2rem(width, 40);
                    .px2rem(height, 50);
                }
            }
        }
        .ul2 {
            position: absolute;
            .px2rem(left, 10);
            .px2rem(top, 100);
            display: none;
            li {
                .px2rem(width, 80);
                .px2rem(height, 80);
                background: #333333;
                border-radius: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            li:nth-child(1) {
                img {
                    .px2rem(width, 40);
                    .px2rem(height, 40);
                }
            }
            li:nth-child(2) {
                .px2rem(margin-top, 30);
                img {
                    .px2rem(width, 40);
                    .px2rem(height, 50);
                }
            }
        }
    }
    span:nth-child(2) {
        font-weight: bolder;
        font-family: "楷体";
    }
    span:nth-child(3) {
        display: block;
        .px2rem(width, 40);
        .px2rem(height, 40);
        .px2rem(font-size, 25);
        .px2rem(line-height, 40);
        border: 1px solid white;
        .px2rem(margin-right, 10);
        border-radius: 100%;
        text-align: center;
    }
}

.active1 {
    background: #f9552b;
    transition: background-color 0.6s;
}

.active2 {
    transition: background-color 0.8s;
}

//轮播
.lunbo {
    img {
        width: 100%;
    }
}

//小点
.naton {
    display: flex;
    justify-content: flex-start;
}

//小点
.swiper-pagination-bullet-active {
    background: red !important;
}

//导航
.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    .px2rem(height, 170);
    background: white;
    margin-bottom: 2%;
    figrue {
        width: 25%;
        text-align: center;
        img {
            .px2rem(height, 100);
            .px2rem(width, 100);
        }
        p {
            .px2rem(font-size, 26);
            color: black;
        }
    }
}

//必抢推荐
.Recommend {
    width: 100%;
    .px2rem(height, 100);
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    .cont {
        width: 94%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h2 {
            .px2rem(font-size, 32);
            font-weight: bolder;
            span {
                .px2rem(font-size, 22);
                font-weight: 400;
                color: #444444;
            }
        }
        span:nth-child(2) {
            .px2rem(font-size, 26);
            color: #a3a3a3;
        }
    }
}

//滑动
.huadon {
    width: 100%;
    .px2rem(height, 300);
    background: white;
    .slide {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .content {
            width: 96%;
            height: 94%;
            display: flex;
            padding-top: 2px;
            border: 1px solid #CCCCCC;
            figure {
                .px2rem(width, 270);
                height: 100%;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .text {
                flex: 1;
                height: 100%;
                padding-left: 5px;
                h3 {
                    .px2rem(font-size, 28);
                    font-weight: 500;
                    .px2rem(height, 75);
                    .px2rem(line-height, 75)
                }
                p:nth-child(2) {
                    .px2rem(font-size, 24);
                    color: #4A4A4A;
                    .px2rem(height, 40);
                    .px2rem(line-height, 40)
                }
                p:nth-child(3) {
                    .px2rem(height, 100);
                    .px2rem(line-height, 100);
                    span:nth-child(1) {
                        .px2rem(font-size, 32);
                        font-weight: bolder;
                        color: #e61414;
                    }
                    span:nth-child(2) {
                        .px2rem(font-size, 20);
                        color: #888888;
                        text-decoration: line-through;
                    }
                }
                p:nth-child(4) {
                    .px2rem(height, 50);
                    .px2rem(line-height, 50);
                    .px2rem(font-size, 20);
                    width: 90%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    span:nth-child(1) {
                        display: block;
                        text-align: center;
                        width: 55%;
                        background: #fe8400;
                        .px2rem(height, 25);
                        .px2rem(line-height, 27);
                        border-radius: 20px;
                        color: white;
                    }
                    span:nth-child(2) {
                        color: #ea3422;
                    }
                }
            }
        }
    }
    .swiper-slide-active {
        margin-right: 0 !important;
    }
}

.active {
    color: #ea3422;
    border-bottom: 2px solid #ea3422;
}

.lists {
    width: 100%;
    .box {
        overflow: hidden;
        .banner {
            width: 100%;
            .px2rem(margin-top, 10);
            .px2rem(height, 80);
            .px2rem(line-height, 80);
            background: white;
            color: #828282;
            .nav-list {
                border-bottom: 1px solid #CCCCCC;
                div {
                    text-align: center;
                    .px2rem(font-size, 32);
                    font-weight: bolder;
                }
            }
        }
    }
}

.active_banner {
    z-index: 99;
    width: 100%;
    .px2rem(height, 80);
    .px2rem(line-height, 80);
    background: white;
    color: #828282;
    position: fixed;
    left: 0;
    .px2rem(top, 90);
    .nav-list {
        border-bottom: 1px solid #CCCCCC;
        div {
            text-align: center;
            .px2rem(font-size, 32);
            font-weight: bolder;
        }
    }
}

.tran {
    transition: top 0.8s;
}

.subject-list {
    .px2rem(margin-top, 3);
    .list_slide {
        width: 100%;
        h3 {
            width: 100%;
            .px2rem(height, 70);
            text-align: center;
            .px2rem(line-height, 70);
            color: #2F2F2F;
            .px2rem(font-size, 30);
            font-weight: bolder;
            background-image: url(../img/bg-1.png);
            background-size: 100% 100%;
        }
    }
    //left
    .clothes {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .commodity {
            width: 49%;
            .px2rem(height, 580);
            background: white;
            .px2rem(margin-top, 10);
            figure {
                width: 100%;
                .px2rem(height, 380);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            p:nth-child(2) {
                .px2rem(margin-left, 22);
                width: 80%;
                .px2rem(height, 80);
                .px2rem(line-height, 40);
                .px2rem(font-size, 20);
            }
            p:nth-child(3) {
                .px2rem(margin-left, 22);
                width: 90%;
                .px2rem(height, 60);
                .px2rem(line-height, 60);
                border-bottom: 1px solid #CCCCCC;
                span:nth-child(1) {
                    .px2rem(font-size, 30);
                    font-weight: bolder;
                    color: #e61414;
                }
                span:nth-child(2) {
                    .px2rem(font-size, 18);
                    color: #565555;
                    font-weight: bolder;
                    text-decoration: line-through;
                }
            }
            p:nth-child(4) {
                .px2rem(margin-left, 22);
                width: 90%;
                .px2rem(height, 60);
                .px2rem(line-height, 60);
                .px2rem(font-size, 24);
                color: #a1a1a1;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
    //right
    .Major_suit {
        .px2rem(height, 610);
        background: white;
        width: 100%;
        .px2rem(margin-bottom, 10);
        figure {
            .px2rem(height, 300);
            width: 100%;
            img {
                width: 100%;
                .px2rem(height, 300);
            }
        }
        .huadon1 {
            border-bottom: 1px solid #CCCCCC;
            .slide1 {
                margin-right: 10px !important;
                .px2rem(height, 242);
                .content2 {
                    figure {
                        width: 100%;
                        .px2rem(height, 178);
                        .px2rem(margin-top, 10);
                        border: 1px solid #CCCCCC;
                        img {
                            width: 100%;
                            .px2rem(height, 178);
                        }
                    }
                    p {
                        .px2rem(height, 45);
                        .px2rem(line-height, 45);
                        text-align: center;
                        span:nth-child(1) {
                            .px2rem(font-size, 20);
                        }
                        span:nth-child(2) {
                            .px2rem(font-size, 14);
                            color: #888888;
                            text-decoration: line-through;
                        }
                    }
                }
            }
        }
        .foog {
            .px2rem(height, 60);
            .px2rem(line-height, 60);
            display: flex;
            justify-content: flex-end;
            .px2rem(font-size, 22);
            span {
                .px2rem(margin-right, 10);
            }
            span:nth-child(1) {
                color: #f9552b;
            }
            span:nth-child(3) {
                color: #f9552b;
            }
        }
    }
}

.footer {
    z-index: 99;
    .px2rem(height, 100);
    width: 100%;
    background: #f5f5f5;
    border-top: 1px solid #CCCCCC;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    figrue {
        width: 25%;
        text-align: center;
        img {
            .px2rem(height, 52);
            .px2rem(width, 52);
        }
        p {
            .px2rem(font-size, 20);
            color: #444444;
        }
        .actives {
            color: red;
        }
    }
}

.Empty_box {
    .px2rem(height, 100);
}